<mat-card>Outbox</mat-card>
<div class="content">
  <button mat-raised-button (click)="sendEmail()">Write New Email</button>
  <mat-progress-spinner *ngIf="!areEmailsLoaded" mode="indeterminate"></mat-progress-spinner>
  <div *ngIf="areEmailsLoaded">
    <mat-card *ngFor="let email of obs | async">
      <mat-list>
        <mat-list-item>
          To: {{email.email}}
        </mat-list-item>
        <mat-divider></mat-divider>
        <mat-list-item>
          Date and time: {{email.timestamp | date: 'yyyy-MM-dd, HH:mm'}}
        </mat-list-item>
        <mat-divider></mat-divider>
        <mat-list-item>
          Subject: <a routerLink="/emails/{{email.id}}">{{email.subject}}</a>
        </mat-list-item>
      </mat-list>
    </mat-card>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>
</div>
